import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta title="Getting Started/Basic Examples" id="getting-started-examples" />

## Basic

Creating a React Data Table should be easy. Simply define your columns and data arrays:

```js
import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
};
```

## Basic Sorting

Adding sorting a table has never been easier:

```js
import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Title',
		selector: row => row.title,
		sortable: true,
	},
	{
		name: 'Year',
		selector: row => row.year,
		sortable: true,
	},
];

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
		/>
	);
};
```

## Selectable Rows

Adding selectable rows is usually quite a bit of code. Let's simplify:

```js
import DataTable from 'react-data-table-component';

const columns = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
			selectableRows
		/>
	);
};
```

## Expandable Rows

Adding expandable rows is no easy feat. Let's simplify:

```js
import DataTable from 'react-data-table-component';

// A super simple expandable component.
const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;

const columns = [
	{
		name: 'Title',
		selector: row => row.title,
	},
	{
		name: 'Year',
		selector: row => row.year,
	},
];

const data = [
  	{
		id: 1,
		title: 'Beetlejuice',
		year: '1988',
	},
	{
		id: 2,
		title: 'Ghostbusters',
		year: '1984',
	},
]

function MyComponent() {
	return (
		<DataTable
			columns={columns}
			data={data}
			expandableRows
			expandableRowsComponent={ExpandedComponent}
		/>
	);
};
```
